import React,{useEffect, useState} from 'react';
import Head from 'next/head';
import Link from 'next/link';
import {Row,Col,Breadcrumb} from 'antd'; // antd 提供的组件

import axios from 'axios';

// 自定义组件
import Header from '../components/Header/Header';
import Footer from '../components/Footer/Footer';
import ResumeCard from '../components/ResumeCard/ResumeCard';
import Advert from '../components/Advert/Advert';

// api 接口管理文件
import apiUrl from '../config/apiUrl';

export default function Home(props) {

  
  
  const [articleList,setArticleList] = useState(null);
  const [articleListLoading,setArticleListLoading] = useState(true);

  useEffect( () => {

    setArticleList(props.data);
    setArticleListLoading(false);

  })
  
  return (
    <>
      <Head className="header">
        <title>Hot|Pot</title>

      </Head>
        <Header />

        
        <Row className="body" type="flex" justify="center" gutter={32}>
          <Col className="body_left" xs={0} sm={0} md={7} lg={5} xl={4} xxl={3}>
            <ResumeCard />
            <Advert />
          </Col>

          
          <Col className="body_right" xs={22} sm={22} md={17} lg={16} xl={14} xxl={10}>
            <Breadcrumb>
                <Breadcrumb.Item><Link href="/"><a >首页</a></Link></Breadcrumb.Item>
                
                <Breadcrumb.Item>我的</Breadcrumb.Item>
            </Breadcrumb>
            

          </Col>
          
        </Row>

        <Footer />

      



 
    </>
  )
}


// 获取数据，todo：改成next新版本获取数据的方法
Home.getInitialProps = async (ctx) => {


  const data = await axios.get(apiUrl.getArticleList).then(res => res.data);

  
  return { data:data.data};
} 